<template>
	<view>
		<view class="container-title">
			<view>
			  <button style="margin-left: 20px; width: 150px; border-radius: 8px; background-color: #ebebeb; display: flex; align-items: center;" @tap="selectAllCycle">
			    <view class="" style="padding-left: 10px; flex-grow: 1;text-align: left;">
			      {{cycle.name}}
			    </view>
			    <view class="cuIcon-triangledownfill" style="text-align: right;margin-right: 10px;font-size: 15px;"></view>
			  </button>
			</view>
		</view>
		
		<view class="scroll-page" style="width: 100%; height: 100%;font-size: 13px;" v-if="showLeaderOkr == 0">
		    <!-- 使用 scroll-view 组件包裹可滚动内容 -->
			<view class="cu-form-group margin-top" style="border-radius: 8px;margin-left: 10px;margin-right: 10px;flex-direction: column;">
				<view style="display: flex; flex-direction: row; justify-content: flex-start; width: 100%; margin-top: 10px;">
				  <view style="display: flex; justify-content: center; align-items: center;">
				    {{cycle.name}}
				  </view>
				  <text style="padding: 3px; color: #ffffff; margin-left: 10px; text-align: left; border-radius: 8px;"
				    :style="{'background-color': calculateDifference(cycle, nowDate)=='未开始' ? 'gold' : (calculateDifference(cycle, nowDate)=='已结束' ? 'red' : 'green')}">
				    {{ calculateDifference(cycle, nowDate)}}
				  </text>
				  <view class="cuIcon-more" style="display: flex; justify-content: center; align-items: center; margin-left: auto;margin-right: 10px;font-size: 20px;" @click="cycleInfor(cycle)"></view>
				</view>
				<view class="" style="display: flex; flex-direction: row; align-items: center;width: 100%;margin-bottom: 10px;margin-top: 10px;">
				  <view class=" " style="width: 100%;align-items: center;margin-right: 10px;">
				    <liu-progressbar :textInside="false" :progress="calculateProgress()" color="#4a4a4a" :height="'10rpx'" style="width: auto;"/>
				  </view>
				</view>
			</view>
			
		    <scroll-view class="scroll-view" scroll-y="true">
		      <!-- 可滚动的内容 --> 
		      <view class="content" style="padding-top: unset;">
		        <!-- 在这里放置你的页面内容 -->
		        <view class="bg-white" v-for="(item, index) in okrList" :key="index" style="border-radius: 10px;">
		            <view class="margin-top" @tap="okrDetail(item)" style="border-bottom: 1px solid #ccc;">
						<view class="alignment-container" style="margin-left: 10px;">
							<span class="iconfont icon-jiantou-12" style="padding: 10px;padding-bottom: unset;"></span>
								 
							<div style="margin-left: 5px;" class="alignment-row" v-if="item.alignmentList && item.alignmentList.length > 0" v-for="(a, index) in item.alignmentList" :key="index">
								<view class="" @tap.stop="alignmentDetail(a, 0)">
										{{ a.targetName }}{{ index < item.alignmentList.length - 1 ? '，' : '' }}
								</view>
							</div>
						    <div class="title cuIcon-add" style="" @tap.stop="selectAlignment(item)">添加对齐目标</div>
						</view>
						
		              <view class="title" style="font-size: 20px; display: block; padding: 5px;margin-left: 10px">
		                {{ item.name }}
		              </view>
						<span class="iconfont icon-jiantou-15" style="padding: 10px;padding-top: unset;margin-left: 10px" v-if="item.alignments"></span>
							
					  <div class="alignment-row" v-if="item.alignments && item.alignments.length > 0" v-for="(a, index) in item.alignments" :key="index">
						<view class="" @tap.stop="alignmentDetail(a, 1)">
							{{ a.sourceName }}{{ index < item.alignments.length - 1 ? '，' : '' }}
						</view>
					  </div>
					  				  
					  <div class="item-container" style=" display: flex;padding: 10px;margin-left: 10px;">
					    <div style="display: flex; align-items: center;">
					      <div>
					        进度：
					      </div>
					      <div style="flex: 1;">
							  <l-circle :percent="item.progress" size="20px"></l-circle>
					      </div>
						  <text style="margin-left: 5px;">{{item.progress}}%</text>
					    </div>
						  <div class="leader-name" style="padding: 10px">
							负责人：{{ item.okrLeader.name }}
						  </div>
					  </div>
		            </view>
					
					<view class="container-test" @tap="toKrDetail(kr)" v-for="(kr, index) in item.subOkrList" :key="index" >
						<view class="" :style="{ 'border-bottom': index !== item.subOkrList.length - 1 ? '1px solid #ccc' : 'none', 'margin-left': '30px' }">
							<view class="top" style="display: flex;width: 100%;margin: 5px;" >
							   <view class="left" style="flex: 1; display:flex;padding: 5px;">
							        <!-- 左边部分 -->
									<text style="text-align: left;color: #b3b3b3;">{{ kr.content}}</text>
								</view>
								<view class="right" style="flex: 9; display: flex; align-items: center;margin: 5px;">
									<!-- 右边部分 -->
									<text class="text-align: left;">{{kr.name}}</text>
								</view>
							</view>
							
							<view class="bottom" style="display: flex;width: 100%;margin-bottom: 5px;">
								<view class="left" style="flex: 1; display:flex;justify-content: center;align-items: center;margin: 5px;">
								 <!-- 左边部分 -->
								</view>
								<view class="right" style="flex: 9; display: flex; align-items: center;margin: 5px;">
									<!-- 右边部分 -->
									<l-circle :percent="kr.progress" size="20px">
									</l-circle>
									<text class="text-align: left" style="margin-left: 5px;">  {{kr.progress}}%</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="flex" style="border-top: 1px solid #ccc;">
						<view class="flex-sub padding-sm margin-xs radius" style="text-align: center;" @click="updateOkr(item)">
							<span class="iconfont">&#xe663;</span>
							<span style="margin-left: 5px;">编辑</span>
						</view>
						<view class="flex-sub padding-sm margin-xs radius with-border" style="text-align: center;position: relative;" @click="okrDetail(item)">
							<span class="iconfont">&#xe6ba;</span>
							<span style="margin-left: 5px;">详情</span>
						</view>
					</view>
					
		        </view>
		      </view>
		    </scroll-view>
			<view v-if="!okrList.length" style="width: 100%;height: 100%;">
				<image src="https://gd-hbimg.huaban.com/cb5152412e598c37e9a8cf3c515e4f2a35b6f74b21834-udqg7h_fw658" ></image>
			</view>
		  </view>
		  
		  <!-- 自己负责的okr -->
		  <view class="scroll-page" style="width: auto; height: auto;" v-if="showLeaderOkr == 1">
		      <!-- 使用 scroll-view 组件包裹可滚动内容 -->
			  <view class="bg-white" style="padding: 15px;margin-top: 5px;">
			  	我负责的okr
			  </view>
		      <scroll-view class="scroll-view" scroll-y="true">
		        <!-- 可滚动的内容 -->
		        <view class="content" style="padding-top: unset;">
		          <!-- 在这里放置你的页面内容 -->
		          <!-- 例如： -->
		          <view class="bg-white" v-for="(item, index) in leaderOkr" :key="index">
		              <view class="margin-top">
		  				  <view class="alignment-container">
		  				     <div class="cuIcon-forward" style="font-size: 11px; display: block;padding-left: 10px;">
		  						 对齐目标：
		  						  <div class="alignment-row" v-if="item.alignmentList && item.alignmentList.length > 0" v-for="(a, index) in item.alignmentList" :key="index">
		  							<view class="" @click="alignmentDetail(a, 0)">
		  								{{ a.targetName }}{{ index < item.alignmentList.length - 1 ? '，' : '' }}
		  							</view>
		  						  </div>
		  				     </div>
		  				     <div class="title cuIcon-add" style="color: blue;" @tap.stop="selectAlignment(item)">添加对齐目标</div>
		  				   </view>
		                <view class="title" style="font-size: 20px; display: block; padding: 5px">
		                  {{ item.name }}
		                </view>
		  			  <div class="cuIcon-forward" style="font-size: 11px; display: block;padding-left: 10px;">
		  					被对齐：
		  				  <div class="alignment-row" v-if="item.alignments && item.alignments.length > 0" v-for="(a, index) in item.alignments" :key="index">
		  					<view class="" @click="alignmentDetail(a, 1)">
		  						{{ a.sourceName }}{{ index < item.alignments.length - 1 ? '，' : '' }}
		  					</view>
		  				  </div>
		  			  </div>
		  			  				  
		  			  <div class="item-container" style=" display: flex;padding-left: 10px">
		  			    <div style="display: flex; align-items: center;">
		  			      <div>
		  			        进度：
		  			      </div>
		  			      <div style="flex: 1;">
		  			        <liu-progressbar :textInside="false" :progress="item.progress" color="#333333" :height="'20rpx'" style="width: 300rpx;"/>
		  			      </div>
		  			    </div>
		  			  </div>
		  			  
		  			  <div class="leader-name" style="padding-left: 10px">
		  			    负责人：{{ item.okrLeader.name }}
		  			  </div>
		              </view>
		  			<view class="bg-white" style="border: 1px solid; " v-for="(kr, index) in item.subOkrList" :key="index">
						<view class="title" style="display: block;margin-top; padding: 3px">
						  {{ kr.content}}：{{kr.name}}
						</view>
						<view class="subtitle" style="display: block; padding: 3px">
						  <!-- 进度：{{kr.alignmentProgress ? kr.alignmentProgress: kr.progress}}% -->
						  进度：{{kr.progress}}%
						</view>
		  			</view>
		  			<view class="cu-form-group " >
		  				<button style="width: 45%;" @click="updateOkr(item)" class=""> 编辑</button>
		  				<button style="width: 45%;" @click="okrDetail(item)"> 详情</button>
		  			</view>
		          </view>
		        </view>
		      </scroll-view>
		    </view>
			
			<popup-layer ref="selectAllCycle" :direction="'top'" >
				<view style="display: flex; justify-content: space-between;text-align: center;height: 50px;">
				    <view style="padding: 15px;text-align: center;font-size: 20px;" class="cuIcon-unfold" @tap="closeSelectAllCycle"></view>
				    <view style="text-align: center; font-size: 20px; padding: 10px;">选择周期</view>
				    <view style="color: skyblue;padding: 15px;text-align: center;" @tap="addCycle">新建</view>
				</view>
				<div class="search-container margin-top" style="border: darkgray;margin-bottom: 10px;margin-top: 10px;">
					<i class="cuIcon-search margin-left"></i>
					<input
						style="width: 600px;margin-left: 10px;"
						type="text"
						search="search"
						placeholder="请输入"
						@confirm="handleSearch"
						@input="handleInput"
						class=""/>
				</div>
				<view class="" style="border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; height: 50px; display: flex; align-items: center; justify-content: center;">
					全部周期
				</view>
				<view class="" style="border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; height: 50px; display: flex; align-items: center; justify-content: flex-start;">
				  <view style="margin-right: 10px;margin-left: 10px;">
				    <button style="width: 55px;background-color: gainsboro;border-radius: 5px;" :style="{backgroundColor: cycleStatus == 'all'? 'skyblue':'gainsboro'}" @tap="findCycles('all')">全部</button>
				  </view>
				  <view style="margin-right: 10px;margin-left: 10px;">
				    <button style="width: 55px;background-color: gainsboro;border-radius: 5px;" :style="{backgroundColor: cycleStatus == 'on'? 'skyblue':'gainsboro'}" @tap="findCycles('on')">进行中</button>
				  </view>
				  <view style="margin-right: 10px;margin-left: 10px;">
				    <button style="width: 55px;background-color: gainsboro;border-radius: 5px;" :style="{backgroundColor: cycleStatus == 'not'? 'skyblue':'gainsboro'}" @tap="findCycles('not')">未开始</button>
				  </view>
				  <view style="margin-right: 10px;margin-left: 10px;">
				    <button style="width: 55px;background-color: gainsboro;border-radius: 5px;" :style="{backgroundColor: cycleStatus == 'end'? 'skyblue':'gainsboro'}" @tap="findCycles('end')">已结束</button>
				  </view>
				</view>
			  <!-- 为弹出层内容容器添加滚动条样式 -->
			 <view class="content bg-gray " style="overflow-y: auto;height: 350px;padding: unset;margin-left: unset;">
					<div class="cu-form-group ustify-content: space-between;" v-for="(item, index) in copyCycleList" :key="index" @tap="switchCycle(item)" >
						<div class="info" style="margin-left: 15px;">
							{{item.name}}
						</div>
						<div class="info" style="margin-left: auto;">
							<span v-if="item.startTime > currentTime" style="color: blueviolet;">未开始</span>
							<span v-else-if="item.endTime >= currentTime && item.startTime <= currentTime" style="color: green;">进行中</span>
							<span v-else style="color: red;">已结束</span>
						</div>
					</div>
			  </view>
			</popup-layer>
		  
		  <!-- 弹出框选择对标的OKR -->
		  <popup-layer ref="popupRef" :direction="'top'" > <!-- 设置弹出层的高度 -->
		  	<view style="text-align: center; font-size: 20px;" class="margin-top margin-bottom" @tap="chengeCycle">{{ alignmentCycle.name }}(一个OKR只能选中一项)</view>
		    <!-- 为弹出层内容容器添加滚动条样式 -->
		    <view class="content bg-gray" style="overflow-y: auto;height: 450px;padding: unset;font-size: 11px;"> <!-- 添加样式以启用垂直滚动 -->
				<view class="custom-view" style="margin: 10px;" v-for="(item, index) in allOkrList" :key="index">
					
					<view style="border-bottom: 1px solid;">
						<view class="" style="display: flex; justify-content: space-between; align-items: center;background-color: white;">
						  <view class="title bg-white" style="font-size: 20px; padding: 10px;">
							{{ item.name }}
						  </view>
						</view>
						<div class="item-container bg-white" style=" display: flex; block;padding: 10px;">
						  <div style="display: flex; align-items: center;">
							<div>
							  负责人：{{item.leaderName}}，进度：
							</div>
							<div style="flex: 1;">
							  <liu-progressbar :textInside="false" :progress="item.progress" color="#333333" :height="'10rpx'" style="width: 300rpx;"/>
							</div>
						  </div>
						</div>
					</view>
					<view class="bg-white" style=" block;padding: 10px;" v-for="(kr, index2) in item.subOkrList" :key="index2" >
						<view :class="{ selected: kr.selected }" @click="selectKR(kr,index,index2)" style="display: flex; justify-content: space-between; align-items: center;background-color: white;">
							<view class="title" style="display: block;">
								{{ kr.content }}：{{ kr.name }}
							</view>
							<div :class="{ 'circle': true, 'selected': kr.selected }">
							  <div class="check-mark" v-if="kr.selected">&#10003;</div>
							</div>
						</view>
					</view>
				</view> 
		    </view>
			<view class="button-container">
				<button class="" style="font-size: 15px;width: 200px;flex: unset;height: 40px;" @click="cancleSelcct">取消</button>
				<button class="confirm-button" style="font-size: 15px;width: 200px;flex: unset;height: 40px;" @click="comsumSelect">确定</button>
			</view>
		  </popup-layer>
		  
		  <popup-layer ref="cyclePopupRef" :direction="'top'"> <!-- 设置弹出层的高度 -->
		  <view style="text-align: center; font-size: 20px;padding: 10px;" class="margin-top margin-bottom">周期选择</view>
		    <!-- 为弹出层内容容器添加滚动条样式 -->
		    <view class="content bg-gray" style="overflow-y: auto;height: 350px;padding: unset;margin-top: 10px;"> <!-- 添加样式以启用垂直滚动 -->
		  	<!-- <view class="" v-for="(item, index) in cycleList" :key="index">
		  	  <view class="cu-form-group margin-top" @click="selectCycle(item, index)">
		  	  	<div class="left-content">
		  	  	    <div class="info">
		  	  	        周期名：{{item.name}}
		  	  	    </div>
		  	  	    <div class="info">
		  	  	        周期时间：{{item.startTime}} ~ {{item.endTime}}
		  	  	    </div>
		  	  		<div class="info">
		  	  		    周期状态：
		  	  		    <span v-if="item.startTime > currentTime" style="color: blueviolet;">未开始</span>
		  	  		    <span v-else-if="item.endTime > currentTime && item.startTime < currentTime" style="color: green;">进行中</span>
		  	  		    <span v-else style="color: red;">已结束</span>
		  	  		</div>
		  	  	</div>
		  	  </view>
		  	</view> -->
			<div class="cu-form-group ustify-content: space-between;" v-for="(item, index) in cycleList" :key="index" @click="selectCycle(item, index)">
				<div class="info" style="margin-left: 15px;">
					{{item.name}}
				</div>
				<div class="info" style="margin-left: auto;">
					<span v-if="item.startTime > currentTime" style="color: blueviolet;">未开始</span>
					<span v-else-if="item.endTime >= currentTime && item.startTime <= currentTime" style="color: green;">进行中</span>
					<span v-else style="color: red;">已结束</span>
				</div>
			</div>
		    </view>
		  </popup-layer>
		  
		  <popup-layer ref="alignmentShowPopupRef" :direction="'top'"> <!-- 设置弹出层的高度 -->
			<view class="" v-if="showIndex == 0">
				<view style="text-align: center; font-size: 20px;">{{alignment.targetLeaderName}}</view>
				<!-- 为弹出层内容容器添加滚动条样式 -->
				<view class="content bg-gray " style="overflow-y: auto;height: 350px;"> <!-- 添加样式以启用垂直滚动 -->
					<view class="cu-form-group " >
						对齐目标：{{alignment.okrName ? alignment.okrName : alignment.targetName}}
					</view>
					<view class="cu-form-group " v-if="alignment.okrName">
						KR：{{alignment.targetName}}
					</view>
					<view class="cu-form-group " >
						项目级别：{{alignment.type == 1 ? "个人级":"公司级"}}，负责人：{{alignment.targetLeaderName}}
					</view>
					<button style="width: auto;" @tap="cancleAlignment">取消对齐</button>
				</view>
			</view>
			
			<view class="" v-if="showIndex == 1">
				<view style="text-align: center; font-size: 20px;">{{alignment.sourceLeaderName}}</view>
				<!-- 为弹出层内容容器添加滚动条样式 -->
				<view class="content bg-gray " style="overflow-y: auto;height: 350px;"> <!-- 添加样式以启用垂直滚动 -->
					<view class="cu-form-group " >
						OKR：{{alignment.sourceName}}
					</view>
					<view class="cu-form-group " >
						对齐目标：{{alignment.targetName}}
					</view>
					<view class="cu-form-group " >
						项目级别：{{alignment.type == 1? "个人级":"公司级"}}，负责人：{{alignment.sourceLeaderName}}
					</view>
					<button style="width: auto;" @tap="cancleAlignment">取消对齐</button>
				</view>
			</view>
		  </popup-layer>
		  
		  <!-- 设置弹出层的高度 -->
		  <popup-layer ref="cycleSelectPopupRef" :direction="'top'" >
		    <view style="text-align: center; font-size: 20px;padding: 10px;">选择周期</view>
		    <!-- 为弹出层内容容器添加滚动条样式 -->
		    <view class="content bg-gray " style="overflow-y: auto;height: 350px;padding: unset;margin-left: unset;"> <!-- 添加样式以启用垂直滚动 -->
				<div class="cu-form-group" v-for="(item, index) in cycleList" :key="index" @tap="selectedCycle(item)" style="margin-top: 5px;">
				    <div class="left-content">
				        <div class="info">
				            周期名：{{item.name}}
				        </div>
				        <div class="info">
				            周期时间：{{item.startTime}} ~ {{item.endTime}}
				        </div>
						<div class="info">
						    周期状态：
						    <span v-if="item.startTime > currentTime" style="color: blueviolet;">未开始</span>
						    <span v-else-if="item.endTime >= currentTime && item.startTime <= currentTime" style="color: green;">进行中</span>
						    <span v-else style="color: red;">已结束</span>
						</div>
				    </div>
				</div>
		    </view>
		  </popup-layer>
		  
		  <view>
		    <!-- 普通弹窗 -->
		    <uni-popup ref="popup" background-color="#fff">
		      <div class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }" style="height: 100%;">
		        <div style="display: flex;height: 100%;" >
					<view style="display: flex;flex-direction: column;height: 100%;width: 25%;background-color: gainsboro;">
						<div style="">
							<view style="display: block;" @click="selectItem(1)"
							:style="{ color: selectedItem === 1 ? 'blue' : 'black', 'border-left': selectedItem === 1 ? '3px solid blue' : '5px solid gainsboro'}">
								<view class="cuIcon-people" style="text-align: center;font-size: 20px;padding-top: 10px;" ></view>
								<view style="text-align: center;padding-bottom: 10px;">
									我的
								</view>
							</view>
						</div>
						<div style="">
							<view style="display: block;" @click="selectItem(2)" 
							:style="{ color: selectedItem === 2 ? 'blue' : 'black', 'border-left': selectedItem === 2 ? '3px solid blue' : '5px solid gainsboro'}">
								<view class="iconfont icon-bumen" style="text-align: center;font-size: 20px;padding-top: 10px;" ></view>
								<view style="text-align: center;padding-bottom: 10px;">
									部门
								</view>
							</view>
						</div>
						<div style="">
							<view style="display: block;" @click="selectItem(3)" 
							:style="{ color: selectedItem === 3 ? 'blue' : 'black', 'border-left': selectedItem === 3 ? '3px solid blue' : '5px solid gainsboro'}">
								<view class="cuIcon-apps" style="text-align: center;font-size: 20px;padding-top: 10px;" ></view>
								<view style="text-align: center;padding-bottom: 10px;">
									全部
								</view>
							</view>
						</div>
					</view>
		        <div style="width: 100%;" >
					<view class="" v-if="selectedItem == 1">
						<view class="" style="padding: 20px;border-bottom: 1px solid black ;" @click="findAllOkr">
							查看我相关的
						</view>
						<view class="" style="padding: 20px;border-bottom: 1px solid black ;" @click="findOkrByLeader">
							查看我负责的
						</view>
					</view>
				</div>
		        </div>
		      </div> 
		    </uni-popup>
		  </view>
		  
		  <!-- 周期选择弹框 -->
		  <popup-layer ref="cycleInfoPopupRef" :direction="'top'">
		    <!-- <view style="text-align: center; font-size: 20px;padding: 10px;">选择周期</view> -->
		    <!-- 为弹出层内容容器添加滚动条样式 -->
			<view class="" style="display: flex;height: 50px;align-items: center;background-color: white;border-bottom: 1px solid #c6c6c6;" @click="delCycleById(cycle)">
				<view class="cuIcon-delete" style="margin-left: 10px;"></view>
				<view class="" style="margin-left: 10px;" >
					删除周期
				</view>
			</view>
			
			<view class="cu-form-group" style="display: flex;justify-content: center;" @click="closeCycleInfor">
				<view class="" style="">
					取消
				</view>
			</view>
			
		  </popup-layer>
		
		<!-- 悬浮框  方法 :content="content"-->
		<uni-fab class="uni-combox__input" 
			:pattern="pattern"
			:horizontal="horizontal"
			:vertical="vertical"
			:direction="direction"
			@trigger="trigger"
			@fabClick="fabClick"
		></uni-fab>
	</view>
</template>

<script>
	import iconfont from '../../font_4280116_f6izbgedf4m/iconfont.css';
	import request from '../../common/request';
	import common from 'common/common.js';
	export default {
		components:{
		},
		data() {
			return {
				leaderOkr: [], // 自己负责的okr的集合
				showLeaderOkr: 0, // 展示自己负责的okr
				selectedItem: 1, // 当前选中的项的索引
				type: 'center',
				showIndex:'',
				// 悬浮框
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor:"#007AFF"
				},
				staff:{},
				cycle:{},
				leader:{},
				nowDate:'',
				cycleList:[],
				okrMap:[],
				okrList:[],
				allOkrList:[],
				kr:{},
				// 选中的全部，方便判断
				selectedList:[],
				// 选择的kr
				selectedKrList:[],
				// 选择的okr
				selectedOkrList:[],
				// 选中的okr;
				okrSelect: {},
				// 已经选中了的alignment
				alignmentList:[],
				alignment:{},
				alignmentCycle:{},
				// 记录选择的list
				recordSelected:{},
				cycleId:'',
				searchText:'',
				copyCycleList:[],
				cycleStatus:'',
				// 滑动按钮
				 options:[
				  {
					name:'删除',
					width:100,
					background:'red',
					color:'#fff'
				  }
				],
			}
		},
		onLoad(options) {
			this.cycleId = options.cycleId;
			this.staff = uni.getStorageSync("staff");
			// this.getAllCycle();
			// 获取当前时间
			const currentDate = new Date();
			this.nowDate = this.formatDate(currentDate);
			uni.removeStorageSync("ids");
			uni.removeStorageSync("leader");
		},
		onShow() {
			this.getAllCycle();
			
		},
		computed: {
			// 获取当前时间
		    currentTime() {
				const currentDate = new Date();
				return this.formatDate(currentDate); // 获取当前时间
		    },
		},
		methods: {
			toggleStatus(item) {
			      item.selected = !item.selected;
			    },
			// 关闭周期信息弹框
			closeCycleInfor(){
				this.$refs.cycleInfoPopupRef.close();
			},
			// 周期信息
			cycleInfor(cycle){
				// cycleInfoPopupRef
				this.$refs.cycleInfoPopupRef.show();
			},
			// 计算周期的进度，方法
			calculateProgress(){
				const totalProgress = this.okrList.reduce((acc, item) => acc + item.progress, 0);
				// 计算平均数
				var cycleProgress = parseFloat((totalProgress / this.okrList.length).toFixed(2));
				if(cycleProgress){
					return cycleProgress;
				} else {
					return 0;
				}
			},
			// 切换周期
			switchCycle(item){
				this.cycleId =item.id;
				this.getAllCycle();
				this.$refs.selectAllCycle.close();
			},
			// 根据周期状态选择周期
			findCycles(status){
				if(status == "on"){
					this.copyCycleList = this.cycleList.filter(item => item.endTime >= this.currentTime && item.startTime <= this.currentTime);
				} else if(status == "all"){
					this.copyCycleList = this.cycleList;
				} else if(status == "not"){
					this.copyCycleList = this.cycleList.filter(item => item.startTime > this.currentTime);
				} else if(status == "end"){
					this.copyCycleList = this.cycleList.filter(item => item.endTime < this.currentTime);
				}
				this.cycleStatus = status;
			},
			//搜索框输入事件
			handleInput(e){
				this.searchText = e.detail.value
				this.searchText = this.searchText.trim(); // 去掉输入的前后空格
				console.log(this.searchText)
			    if (this.searchText === '') {
					// 如果输入为空，则显示全部数据
					this.copyCycleList = this.cycleList;
				} else {
					this.filteredStaffList = this.cycleList.filter(item => {
						const itemName = item.name.trim(); // 假设员工对象中有一个name属性
						return itemName.includes(this.searchText); // 检查员工名字是否包含输入的文本
					});
					this.copyCycleList = this.filteredStaffList;
				}
			},
			// 关闭周期选择closeSelectAllCycle
			closeSelectAllCycle(){
				// 关闭
				this.$refs.selectAllCycle.close();
			},
			// 最上方选择周期
			selectAllCycle(){
				this.cycleStatus = 'all';
				// 打开
				this.$refs.selectAllCycle.show();
				this.copyCycleList = JSON.parse(JSON.stringify(this.cycleList));
			},
			// 跳转到kr
			toKrDetail(kr){
				uni.navigateTo({
					url: `/pages/kr/krDetail?krId=${kr.id}`,
					// url:'/pages/okrs/addOkr?okr='+ encodeURIComponent(JSON.stringify(okr)),
				})
			},
			// 点击查看自己参与的okr
			findAllOkr(){
				if(this.showLeaderOkr == 1){
					this.getAllCycle();
					this.$refs.popup.close()
					this.showLeaderOkr = 0;
				} else{
					this.getAllCycle();
					this.$refs.popup.close()
				}
			},
			// 点击查看自己负责的okr
			findOkrByLeader(){
				var _this = this;
				request({
					url: common.api_base_url+'/okr/findOkrByLeader/' + _this.staff.id,
					data:{
					},
					method: 'GET',
					success: res => {
						_this.leaderOkr = res.data;
						_this.$refs.popup.close()
						_this.showLeaderOkr = 1;
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 元素的选中
			selectItem(index) {
			    this.selectedItem = index; // 设置当前选中的项
			},
			// 左侧组件
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 通过周期id删除周期
			delCycleById(cycle){
				// this.$refs.cycleSelectPopupRef.close();// 或者 boolShow = false
				this.$refs.cycleInfoPopupRef.close();// 或者 boolShow = false
				this.cycleId = this.cycle.id;
				var _this = this;
				uni.showModal({
				    title: '删除周期',
				    content: '您确定要删除这个周期吗？',
				    success: function (res) {
				        if (res.confirm) {
							request({
								url: common.api_base_url+'/cycle/' + cycle.id,
								data:{
								},
								method: 'DELETE',
								success: res => {
									_this.getAllCycle();
								},
								fail: function(e) {
									uni.showToast({
										title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
										icon:"loading"
									})
								},
							});
				        } else if (res.cancel) {
							res.cancel = true;
				        }
				    }
				});
			},
			// 选择okr的显示周期
			selectedCycle(cycle){
				this.cycle = cycle;
				this.okrList = this.okrMap[cycle.id];
				this.$refs.cycleSelectPopupRef.close();// 或者 boolShow = false
			},
			// 获取总进度
			calculateTotalProgress(krList) {
			      if (krList.length === 0) {
			        return 0;
			      }
			   // 将结果转换为百分数形式，保留两位有效数字
			   return Number(krList.reduce((sum, item) => sum + parseFloat(item.progress), 0) / krList.length);
			},
			// 取消对齐
			cancleAlignment(){
				var _this = this;
				request({
					url: common.api_base_url+'/alignment/' + _this.alignment.id,
					data:{
					},
					method: 'DELETE',
					success: res => {
						_this.$refs.alignmentShowPopupRef.close();
						if(_this.showLeaderOkr == 0){
							_this.getOkrByStaffId();
						} else if(_this.showLeaderOkr == 1){
							_this.findOkrByLeader();
						}
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 点击对齐人，查看对齐详情
			alignmentDetail(alignment, index){
				this.showIndex = index;
				this.$refs.alignmentShowPopupRef.show(); // 或者 boolShow = rue
				this.alignment = alignment;
				this.cycleId  = this.cycle.id;
			},
			// 添加对齐
			addAlignment(){
				// 去空
				this.selectedList = this.selectedList.filter(item => item !== undefined && item !== null && item !== '');
				var _this = this;
				request({
					url: common.api_base_url+'/alignment/addAlignmentForOkr/' + _this.okr.id,
					data:{
						"alignmentList": _this.selectedList,
					},
					method: 'PUT',
					success: res => {
						_this.selectedList = [];
						if(_this.showLeaderOkr == 0){
							_this.getOkrByStaffId();
						} else if(_this.showLeaderOkr == 1){
							_this.findOkrByLeader();
						}
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 点击确定
			comsumSelect(){
				this.$refs.popupRef.close();
				this.addAlignment();
			},
			// 点击取消
			cancleSelcct(){
				this.$refs.popupRef.close();
			},
			// 选择周期
			selectCycle(cycle, index) {
				// 获取当前周期id
				this.alignmentCycle = this.cycleList[index]
				this.allOkrList = this.allOkrGroup[cycle.id]
				
				this.$refs.cyclePopupRef.close();// 或者 boolShow = false
				
			},
			// 选中对标kr
			selectKR(okr) {
				// 当前okr对象
				if(okr.selected){
					// 选中了的，再点击，取消
					if(okr.parentId){
						// 说明是分任务
						this.selectedList[okr.parentId].selected = false;
						this.selectedList[okr.parentId] = null;
					} else {
						// 是okr主任务
						this.selectedList[okr.id].selected = false;
						this.selectedList[okr.id] = null;
					}
				} else{
					// 判断当前list里面有没有okr
					if(this.selectedList[okr.id] || this.selectedList[okr.parentId]){
						// 有，说明是切换
						okr.selected = true;
						if(okr.parentId){
							// 说明是分任务
							this.selectedList[okr.parentId].selected = false;
							this.selectedList[okr.parentId] = okr;
						} else {
							// 是okr主任务
							this.selectedList[okr.id].selected = false;
							this.selectedList[okr.id] = okr;
						}
					} else{
						// 无
						okr.selected = true;
						if(okr.parentId){
							// 说明是分任务
							this.selectedList[okr.parentId] = okr;
						} else {
							// 是okr主任务
							this.selectedList[okr.id] = okr;
						}
					}
				}
			},
			// 点击开启周期选择弹框
			chengeCycle(){
				
				this.$refs.cyclePopupRef.show(); // 或者 boolShow = rue
			},
			// 回显
			showBackAlignment(){
				// 做回显
				if(this.alignmentList){
					for (const alignment of this.alignmentList) {
						for (const key in this.allOkrGroup) {
						// 	// 遍历一个周期
							if(alignment.cycleId == key){
								// 当前周期下所有数据
								var okrList = this.allOkrGroup[key]
								for (const okr of okrList) {
									if (alignment.parentId) {
										// 如果存在，说明是子任务
										for (const kr of okr.subOkrList) {
											if (alignment.targetId === kr.id) {
												// 判断是哪一个子任务
												kr.selected = true;
												// 设置回selectedKrList
												this.selectedList[kr.parentId] = kr;
											}
										}
									} else {
										if (alignment.targetId === okr.id) {
											  // 这里是okr
											  okr.selected = true;
											  // 设置回selectedOkrList
											  this.selectedList[okr.id] = okr;
										}
									}
								}
							}
						}
					}
				}
			},
			// 点击开启KR选择弹框，添加对齐
			selectAlignment(item){
				// 点击对齐按钮之后，展示的周期
				this.alignmentCycle = this.cycleList[0]
				
				this.alignmentList = item.alignmentList;
				this.cycleId  = this.cycle.id;
				
				this.getAllOkrGroupBycycleId();
				this.okr = item;
				
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			// 获取当前周期所有OKR，用来对齐
			getAllOkrGroupBycycleId(){
				var _this = this;
				request({
					url: common.api_base_url+'/okr/getAllOkrGroupBycycleId',
					data:{
					},
					method: 'GET',
					success: res => {
						_this.allOkrGroup = res.data;
						_this.allOkrList = _this.allOkrGroup[_this.alignmentCycle.id];
						_this.showBackAlignment();
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// okr详情
			okrDetail(okr){
				this.cycleId = this.cycle.id;
				uni.navigateTo({
					url:'/pages/okrs/okrDetail?okr='+ encodeURIComponent(JSON.stringify(okr)),
				})
			},
			// 编辑okr
			updateOkr(okr){
				this.cycleId = this.cycle.id;
				uni.navigateTo({
					// url: `/pages/okrs/addOkr?cycleId=${this.cycle.id}`,
					url:'/pages/okrs/addOkr?okr='+ encodeURIComponent(JSON.stringify(okr)),
				})
			},
			// 获取当前用户有关的okr
			getOkrByStaffId(){
				var _this = this;
				request({
					url: common.api_base_url+'/okr/getOkrByStaffId/' + _this.cycleId,
					// url: common.api_base_url+'/okr/getOkrByStaffId/' + 20,
					data:{
					},
					method: 'GET',
					success: res => {
						if(res.data){
							_this.okrList = res.data;
						} else{
							_this.okrList = [];
						}
						// _this.okrMap = res.data;
						// _this.okrList = _this.okrMap[_this.cycleId];
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 时间转换格式方法
			formatDate(date) {
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0');
			  const day = String(date.getDate()).padStart(2, '0');
			  return `${year}-${month}-${day}`;
			},
			// 计算当前时间
			calculateDifference(cycle, nowDate){
				var endTime = new Date(cycle.endTime);
				var nowDate = new Date(nowDate);
				var startTime = new Date(cycle.startTime);
				if(startTime > nowDate){
					return "未开始";
				} else if(startTime <= nowDate && nowDate <= endTime){
					// 计算日期差值（以天为单位）
					var diffDays = Math.abs(endTime - nowDate) / (1000 * 3600 * 24);
					// 使用Math.ceil()函数向上取整
					var roundedDiffDays = Math.ceil(diffDays); 
					return "还剩" + roundedDiffDays + "天";
				} else{
					return "已结束";
				}
			},
			// 周期字体颜色
			 // getStatusColor(cycle, nowDate) {
			 //      const status = this.calculateDifference(cycle, nowDate);
			 //      if (status === "未开始") {
			 //        return "unstarted-color"; // 未开始状态的类名
			 //      } else if (status === "已结束") {
			 //        return "finished-color"; // 已结束状态的类名
			 //      } else {
			 //        return "in-progress-color"; // 进行中状态的类名
			 //      }
			 //    },
			// 获取所有周期
			getAllCycle(){
				var _this = this;
				request({
					url: common.api_base_url+'/cycle',
					data:{
					},
					method: 'GET',
					success: res => {
						_this.cycleList = res.data;
						if(_this.cycleId){
							_this.cycleId =  _this.cycleList.findIndex(e => e.id == _this.cycleId);
							if(_this.cycleId < 0 ){
								_this.cycleId = 0;
							}
							_this.cycle = _this.cycleList[_this.cycleId];
							_this.cycleId = _this.cycle.id;
						}else{
							_this.cycle = _this.cycleList[0];
							_this.cycleId = _this.cycle.id;
						}
						// if(_this.showLeaderOkr == 0){
						// }
						_this.getOkrByStaffId();
						_this.$refs.selectAllCycle.close();
						
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 悬浮框点击事件，跳转到okr添加页面
			fabClick(){
				this.cycle.id = this.cycleId;
				uni.removeStorageSync("ids");
				uni.removeStorageSync("leader");
				uni.navigateTo({
					// url: `/pages/okrs/addOkr?cycleId=${this.cycle.id}`,
					url:'/pages/okrs/addOkr?data='+ encodeURIComponent(JSON.stringify(this.cycle)),
				})
			},
			// 点击添加周期，跳转到添加页面
			addCycle(){
				uni.navigateTo({
					url: `/pages/okrs/addCycle`
				})
			},
		}
	}
</script>

<style scoped>
	.scroll-page {
	  height: 100vh;
	}
	
	.scroll-view {
	  height: 100%;
	}
	
	.content {
	  padding: 10px;
	}
	
	.item {
	  height: 50px;
	  line-height: 50px;
	  background-color: #f0f0f0;
	  margin-bottom: 10px;
	  text-align: center;
	}
	 /* 选中时的红色边框 */
	/* .selected {
	  border: 2px solid red;
	} */
	/* 两个按钮样式 */
	.button-container {
	  display: flex;
	  justify-content: space-between;
	  text-align: center;
	}
	
	button {
	  size: 30px;
	  flex: 1;
	  border-radius: 20px;
	  border: none;
	  text-align: center;
	  font-size: 13px;
	  width: 15px;
	  height: 30px;
	  padding-left: unset;
	  padding-right: unset;
	}
	

	
	/* 设置确定按钮的背景颜色为蓝色 */
	.confirm-button {
	  background-color: blue;
	  color: white;
	}
	
	.alignment-container {
	  display: flex;
	  align-items: center; /* 垂直居中对齐 */
	}
	
	.alignment-row {
	  display: inline-block;
	  margin-right: 10px; /* 可以添加一些右侧间距，根据需要调整 */
	}
	
	
	/* cs */
	.item-container {
	  display: flex; /* 使用Flex布局 */
	  align-items: center; /* 垂直居中对齐 */
	}
	
	.progress-text,
	.progress-circle,
	.leader-name {
	  margin-right: 20px; /* 为各元素之间添加间距，可以根据需要调整 */
	}
	
	/* cs */
	.cu-form-group {
	    display: flex;
	    align-items: center; /* 垂直居中 */
	}
	
	.left-content {
	    flex: 80%; /* 左边占80%宽度 */
	}
	
	.right-content {
	    flex: 20%; /* 右边占20%宽度 */
	    display: flex;
	    justify-content: flex-end; /* 右侧内容右对齐 */
	}
	
	.unstarted-color {
	  color: blueviolet; /* 进行中状态的字体颜色 */
	}
	
	.in-progress-color {
	  color: green; /* 已结束状态的字体颜色 */
	}
	
	.finished-color {
	  color: red; /* 未开始状态的字体颜色 */
	}
	
	.container {
	  display: flex;
	  /* justify-content: space-between; */
	  background-color: white;
	}
	
	.item {
	  /* 左边元素的样式 */
	  /* flex-grow: 1;  */
	  padding: 5px;
	  /* border: 1px solid #ccc; */
	  background-color: white;
	  margin-bottom: unset;
	}
	
	.right {
	  /* 右边元素的样式 */
	  margin-left: auto; /* 使用 margin-left: auto; 将其推到右边 */
	}
	.uni-view{
		width: 80%;
	}

	.viewSelected {
	  display: block;
	  margin-bottom: 10px; /* 垂直间距 */
	}
	/* 选中时的颜色 */
	/* .selected {
	  color: red; 
	} */
	
	.container-test {
	  display: grid;
	  grid-template-rows: auto 1fr; /* 第一行高度由内容决定，第二行占据剩余空间 */
	}
	
	.with-border::before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	  height: 50%;
	  border-left: 2px solid #d4d4d4; /* 调整边框的粗细和颜色 */
	}
	
	 .container-title {
	   display: flex;
	   /* justify-content: left; */
	   align-items: center;
	   height: 8vh;
	   background-color: white;
	 }
	 
	 .search-container {
	     display: flex;
	     align-items: center;
	 }
	
	
	.circle {
	    width: 30px;
	    height: 30px;
	    border-radius: 50%;
	    background-color: #dcdcdc;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    cursor: pointer;
	    margin-right: 10px;
	  }
	
	  .circle.selected {
	    background-color: #99cc99; /* Selected color */
	  }
	
	  .check-mark {
	    font-size: 24px;
	    color: #fff;
	  }
	  
	  .custom-view {
	    border-radius: 10px;
	    /* 其他样式 */
	  }

</style>
